<script setup>
import {onMounted, ref} from "vue";
import {use} from 'echarts/core';
import {CanvasRenderer} from 'echarts/renderers';
import {BarChart} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent, GridComponent,
} from 'echarts/components';
import VChart from 'vue-echarts';
import axios from "axios";
import {ServerHost} from "@/main.ts";
import {ElNotification} from "element-plus";

// 懒加载
const policyList = ref([])
const policyTitleList = ref([])
const policyPageviewList = ref([])
const observerDiv = ref(null)
const hasLoad = ref(false)
onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        if (!hasLoad.value) {
          loadList()
        }
      }
    });
  });
  observer.observe(observerDiv.value);
})

const loadList = () => {
  console.log("开始获取政策列表")
  axios.get(`${ServerHost}/getPolicyList?orderBy=pageview`)
      .then((res) => {
        if (res.status === 200) {
          ElNotification({
            title: '政策获取成功',
            type: 'success',
            position: 'bottom-right',
          })
          policyList.value = res.data;
          hasLoad.value = true
          policyList.value.forEach(policy => {
            policyTitleList.value.push(policy.title)
            policyPageviewList.value.push(policy.pageview)
          })
          console.log(policyPageviewList.value)
        } else {
          ElNotification({
            title: '政策获取失败',
            type: 'error',
            position: 'bottom-right',
          })
        }
      })
}

use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
]);

// var cssVarColor = getComputedStyle(observerDiv).getPropertyValue('--el-color-primary');
// console.log(cssVarColor)

const option = {
  title: {
    text: '政策浏览排行'
  },
  // el主题色（绿）
  color: {
    type: 'linear',
    x: 0, y: 0, x2: 1, y2: 1, // 渐变方向
    colorStops: [
      { offset: 0, color: getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary') }, // 0% 处的颜色
      { offset: 1, color: getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary-light-3') } // 100% 处的颜色
    ]
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: policyTitleList.value,
    inverse: true,
    axisLabel: {
      formatter: function (value) {
        let texts = value;
        if (texts.length > 10) {
          // 限制长度自设
          texts = texts.substring(0, 10) + '...'
        }
        return texts
      }
    },
  },
  series: [
    {
      name: '',
      type: 'bar',
      data: policyPageviewList.value
    },
  ]
};
</script>

<template>
  <div ref="observerDiv"/>
  <v-chart class="chart" :option="option" autoresize/>
</template>

<style scoped>
.chart {
  height: 300px;
}
</style>
